<template>
    <!-- 工具栏ref{{ 工具栏ref }} -->
    <!-- 顶部间距style{{ 顶部间距style }} -->
    <div class="工具栏" ref="工具栏ref" :class="[工具栏class]">
      <el-button type="primary" icon="plus" @click="详情.初始化()">增加</el-button>
      <el-button type="danger" icon="delete" style="margin-left: 10px;" :disabled="!a.选中组.length"
        @click="list.删()">删除</el-button>
    </div>
    <div class="gva-list-box" :style="顶部间距style">
      <el-table ref="multipleTable" border tooltip-effect="dark" :data="单项组" row-key="id" @selection-change="list.选中变了"
        @sort-change="list.sortChange" :default-sort="a.默认排序">
        <el-table-column type="selection" width="40" />
        <el-table-column align="left" label="id" width="80">
          <template #default="scope">
            <el-button type="primary" link icon="link" @click="详情.初始化(scope.row)">{{ scope.row.id
              }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="left" label="类别" prop="类别" width="120" />
        <el-table-column align="left" label="父级类别" width="120">
          <template #default="scope">
            <span>{{ list.取字段显示值(scope.row, "父级id") }}</span>
            <!-- <span>{{ filterDataSource(a.候选值集.父级id, scope.row.父级id) }}</span> -->
          </template>
        </el-table-column>

        <!-- 末尾列 -->
        <el-table-column align="left" sortable label="修改时间" prop="UpdatedAt" width="180">
          <template #default="scope">{{ formatDate(scope.row.UpdatedAt) }}</template>
        </el-table-column>
        <el-table-column align="left" label="操作" fixed="right">
          <template #default="scope">
            <el-button type="danger" link icon="delete" @click="list.删(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="req.page" :page-size="req.pageSize"
          :page-sizes="a.可选页面容量" :total="a.total" @current-change="list.跳转页面" @size-change="list.改单页条数" />
      </div>
    </div>
    <a详情 ref="详情" :list="list"></a详情>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'

import use工具栏 from '@/hooks/工具栏';
const { 工具栏ref, 工具栏class, 顶部间距style } = use工具栏()

import use from '@/hooks/uselist';
const list = use()
const { a, req ,单项组 } = list

const 详情 = ref()
// import use详情_抽屉式 from '@/hooks/use详情_抽屉式';
// const 详情 = use详情_抽屉式({ 查多个: list.查多个 })
// const { 弹窗否, 单项, 初始化, formRef, rule } = 详情

import a详情 from './详情_抽屉式.vue'
// const 弹窗否 = ref(false)

import { getUrl } from '@/utils/image'
// 类别选择组件
// 全量引入格式化工具 请按需保留

import SelectImage from '@/components/selectImage/selectImage.vue'
import { getDictFunc, formatDate, formatBoolean, filterDict, filterDataSource, returnArrImg, onDownloadFile } from '@/utils/format'

// const 候选值集 = ref({})

// const getDataSourceFunc = async () => {
//   const res = await list.取候选值集()
//   console.log(`取候选值集 res 👉`, res)
//   if (res.code === 0) {
//     候选值集.value = res.data
//   }
// }
// getDataSourceFunc()


// 查多个()
</script>

<style lang="scss" scoped></style>
